<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<script src="https://webapi.amap.com/maps?v=1.4.15&key=	dc520bc6f77fd61d95697068aaae42f8"></script>
		<script src="https://webapi.amap.com/maps?v=1.4.15&key=dc520bc6f77fd61d95697068aaae42f8&plugin=AMap.Walking"></script>
		<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<script src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
		<title>地图定位</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src='../js/jquery.min.js'></script>
		<script src="../js/mui.min.js"></script>
		<style type="text/css">
			html,
			body {
				width: 100%;
			}

			#panel {
				position: fixed;
				background-color: white;
				max-height: 90%;
				overflow-y: auto;
				top: 50px;
				right: 10px;
				width: 280px;
			}

			#panel .amap-call {
				background-color: #009cf9;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			#panel .amap-lib-walking {
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-icon mui-icon-right-nav mui-pull-right mui-icon mui-icon mui-icon-refreshempty" id="restart"></a>
			<h1 class="mui-title">地图定位</h1>
		</header>
		<div id="container" style="width:100%; height: 900px;"></div>
		<div id="panel"></div>
	</body>

	<script type="text/javascript">
		let map;
		let id;
		let marker1 = null;
		let marker2 = null;
		let s_1, s_2, e_1, e_2;
		let walking;
		if (navigator.geolocation) {
			id = navigator.geolocation.watchPosition(function(position) {
				//console.log("纬度" + position.coords.latitude + "经度" + position.coords.longitude);

				map = new AMap.Map("container", {
					resizeEnable: true,
					center: [position.coords.longitude, position.coords.latitude], //地图中心点
					zoom: 15 //地图显示的缩放级别
				});
				s_1 = position.coords.longitude;
				s_2 = position.coords.latitude;
				marker1 = new AMap.Marker({
					icon: "../image/poi-marker-default.png",
					position: [s_1, s_2],
				});
				marker1.setMap(map);

				map.on('click', function(e) {
					// marker1 = new AMap.Marker({
					// 	icon: "../image/poi-marker-default.png",
					// 	position: [s_1, s_2],
					// });
					marker1.setMap(map);
					if (marker2 == null) {
						e_1 = e.lnglat.getLng();
						e_2 = e.lnglat.getLat();
						marker2 = new AMap.Marker({
							icon: "../image/poi-marker-default.png",
							position: [e_1, e_2],
						});
						// marker2.setMap(map);
						if (walking)
							walking.clear();
						walking = new AMap.Walking({
							map: map,
							// panel: "panel"
						});

						walking.search([s_1, s_2], [e_1, e_2], function(status, result) {
							if (status === 'complete') {
								log.success('绘制步行路线完成');
								map.remove(marker1);
								map.remove(marker2);
								marker1 = null;
								marker2 = null;
							} else {
								log.error('步行路线数据查询失败' + result);
							}
						});
					}
				})
			}, function(err) {
				switch (err.code) {
					case err.PERMISSION_DENIED:
						return "PERMISSION_DENIED";
					case err.POSITION_UNAVAILABLE:
						return "POSITION_UNAVAILABLE";
					case err.TIMEOUT:
						return "TIMEOUT";
					default:
						return "UNKNOWN_ERROR";
				}
			})
		}else{
			log.error('您的手机不支持手机定位');
		}
		
		document.getElementById("restart").addEventListener('tap', function(e) {
			window.location.reload();
		});
	</script>
</html>
